<template>
  <div v-if="item" class="miningBox">
    <!-- 开箱图片 -->
    <div
      ref="boxItemRef"
      class="boxview-item-img animation-will"
      :class="{
        'boxview-item-delay': item.sort % 2 === 0,
        'boxview-paused': paused,
      }"
      :style="{
        width: item.w,
        height: item.h,
        opacity: item.isOpen ? 1 : 0,
      }"
    >
      <Images :src="item.imgOpen" />
    </div>

    <!-- 未开箱 -->
    <!-- 'boxview-item-delay': item.sort % 2 === 0, -->
    <div
      class="boxview-item-img animation-will"
      :class="{
        'boxview-paused': paused,
      }"
      :style="{
        width: item.w,
        height: item.h,
        opacity: 1,
      }"
      v-if="!item.isOpen"
    >
      <Images :src="item.img" @click="openBoxRequest" />
      <!-- 未开箱文案 -->
      <div class="boxview-item-openNottext">
        <!-- {{ item.sort }} -->
        {{ boxTypeText(item.taskType) }}
      </div>
    </div>
    <!-- bdc 金额 -->
    <div v-if="item.isOpen" class="boxview-item-text">
      + {{ item.sendAmount }} BDC
      <img
        class="boxview-item-text-icon"
        src="/image/mvp/bdc-nums-top-icon.svg"
      />
    </div>

    <!-- 动画元素 -->
    <div
      class="cubic-bezier-ball animation-will"
      v-for="item in ballList"
      :ref="(el) => setRefAction(el, item)"
      :key="item"
    >
      <img
        style="width: 45px; height: 45px"
        src="/image/mvp/mvp/mining-fq-icon.svg"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="miningBox">
import { ref, nextTick } from "vue";
import { throttle } from "@/utils";
import { useWindowSize, useRect } from "@vant/use";

const emit = defineEmits(["openBox"]);

const props = withDefaults(
  defineProps<{
    item?: any; // 宝箱信息
    bdcRect?: any; // 目标位置信息
    isPaused: boolean; // 时候暂停动画
    manual: boolean; // 手动控制开箱动画
  }>(),
  {
    item: undefined,
    isPaused: false,
    manual: false,
  }
);
const { t } = useI18n();

// 获取窗口宽度和高度
const { width } = process.client ? useWindowSize() : { width: ref(320) };
// 是否手动暂停动画
const pausedManually = ref(false);
const paused = computed(() => {
  if (props.isPaused || pausedManually.value) {
    return true;
  } else {
    return false;
  }
});
// 要渲染的钱币元素
const ballList = ref<any>([]);
const ballListRef = ref<any>([]);
// 当前宝箱实例
const boxItemRef = ref();
//将循环ref放入到数组中
const setRefAction = (el: any, item: number) => {
  ballListRef.value[item] = el;
};

// 创建多个元素
const total = ref(0);
const init = async (val: number) => {
  total.value = val;
  for (let index = 0; index < val; index++) {
    ballList.value.push(index); //新增一个动画节点
  }
  nextTick(() => true);
};
//开始执行动画
const start = (point: any, time = 1, xcubic = "linear", ycubic = "ease-in") => {
  for (let index = 0; index < total.value; index++) {
    const ele = ballListRef.value[index];
    if (ele && ele.style) {
      ele.style.left = `${13}px`;
      ele.style["z-index"] = 99999;
      ele.style["visibility"] = "visible";
      ele.style.top = `${-6}px`;
      ele.style.opacity = 1;
    }

    setTimeout(() => {
      if (ele && ele.style) {
        ele.style.left = `${point.x2 - point.x1 - 40}px`;
        ele.style.top = `${point.y2 - point.y1 - 20}px`;
        ele.style["z-index"] = 99999;
        // ele.style['visibility'] = 'visible';
        ele.style.opacity = 0.05;
        // ele.style.opacity = 1;
        ele.style.transition = `left ${time - 0.3}s ${xcubic}, top ${
          time - 0.3
        }s ${ycubic},opacity ${time - 0.3}s ${xcubic}`;
      }

      //动画结束回收dom
      if (index >= total.value - 1) {
        setTimeout(() => {
          removeDom();
        }, (time - 0.3) * 1000);
      }
    }, 100 * index);
  }
};

//动画结束回收dom
const removeDom = () => {
  ballList.value = [];
};

watch(
  () => props.manual,
  (newVal) => {
    if (newVal && manual === false) openBoxRequest();
  }
);
onMounted(() => {
  init(8);
});

// 开箱事件
let manual = false;
const openBox = () => {
  // console.log("--props.bdcRect", props.bdcRect);
  if (!props.bdcRect) return;
  // 1. 获取点击元素的位置、隐藏可点击图片,更改状态
  props.item.isOpen = true;
  const box = useRect(boxItemRef.value);
  manual = true;
  // console.log("--box--", box);
  // 2. 构造参数
  const params: any = {
    time: 1,
    xcubic: "linear",
    ycubic: "cubic-bezier(0.49, -0.29, 0.75, 0.41)",
    point: {
      x1: box.left - ((48 / 390) * width.value || 24),
      y1: box.top,
      x2: props.bdcRect.left / 2,
      y2: props.bdcRect.top,
    },
  };
  // console.log("--params--", params);
  // 2.1 暂停当前动画
  pausedManually.value = true;
  // 3. 触发动画
  start(params.point, params.time, params.xcubic, params.ycubic);
  // 4. 通知父级
  emit("openBox", props.item);
};

const openBoxRequest: () => void = throttle(openBox, 1000);

/**
 * @description: 根据宝箱类型翻译
 * @param {*} val 类型
 */
const boxTypeText = (val: any) => {
  if (val == 2) {
    return t("mvp.shrz2");
  } else if (val == 31) {
    return t("mvp.sccz31");
  } else if (val == 17) {
    return t("mvp.sjhbd17");
  } else if (val == 26) {
    return t("mvp.sqft26");
  } else if (val == 28) {
    return t("mvp.sqpl28");
  } else if (val == 27) {
    return t("mvp.sqdz27");
  } else if (val == 29) {
    return t("mvp.spjy29");
  } else if (val == 30) {
    return t("mvp.mrhy30");
  } else if (val == 18) {
    return t("mvp.mrqd18");
  }
};
</script>
<style lang="scss" scoped>
@keyframes wave {
  0% {
    transform: translateY(-4.2px);
  }
  50% {
    transform: translateY(4.2px);
  }
  100% {
    transform: translateY(-4.2px);
  }
}
@keyframes waveDelay {
  0% {
    transform: translateY(4.2px);
  }
  50% {
    transform: translateY(-4.2px);
  }
  100% {
    transform: translateY(4.2px);
  }
}
.miningBox {
  .boxview {
    &-item {
      position: absolute;
      flex-direction: column;
      justify-content: center;
      min-width: 72 * 2px;
      &-openNottext {
        position: absolute;
        z-index: 999999999;
        min-width: 92 * 2px;
        margin-top: -8 * 2px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2 * 2px 0 * 2px;
        font-size: 10 * 2px;
        color: #007bff;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.4) 50.2%,
          rgba(255, 255, 255, 0) 100%
        );
        backdrop-filter: blur(4 * 2px);
        text-align: center;
      }
      &-delay {
        animation: waveDelay 4.5s infinite ease-in-out;
      }
      &-text {
        position: relative;
        z-index: 999;
        margin-top: 44 * 2px;
        color: #007bff;
        font-size: 12 * 2px;
        font-weight: 590;
        padding: 2 * 2px 6 * 2px;
        border-radius: 100px;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        border: 3px solid rgba(255, 255, 255, 0.3);
        &-icon {
          width: 7 * 2px;
          height: 6 * 2px;
          position: absolute;
          top: -6 * 2px;
          left: 50%;
          transform: translate(-50%, 0);
        }
      }
      &-img {
        position: absolute;
        top: 0px;
        // left: 10px;
        opacity: 0;
        animation: wave 4.5s infinite ease-in-out;
      }
    }
    &-paused {
      animation-play-state: paused !important;
    }

    &-ly {
      position: absolute;
      bottom: 420px;
      left: 0px;
      width: 51 * 2px;
      height: 22 * 2px;
    }
    &-ry {
      position: absolute;
      bottom: 610px;
      right: 0px;
      width: 52 * 2px;
      height: 48 * 2px;
    }

    &-wk {
      position: absolute;
      bottom: -55px;
      left: 0;
      width: 100%;
    }
    &-jump {
      position: absolute;
      bottom: 20 * 2px;
      left: 0px;
      margin-left: 30 * 2px;
      align-items: flex-end;
      &-btn {
        border-radius: 100px;
        background: rgba(255, 255, 255, 30%);
        padding: 0 * 2px 10 * 2px;
        height: 25 * 2px;
        line-height: 25 * 2px;
        color: #fff;
        font-size: 11 * 2px;
        font-weight: 500;
      }
    }
    &-unclaimed {
      position: absolute;
      bottom: 302px;
      right: 160px;
      z-index: 999;
      padding: 6 * 2px 5 * 2px 6 * 2px 10 * 2px;
      background-color: #fff;
      border-radius: 100px;
      &-icon {
        position: relative;
        right: -23px;
        width: 7 * 2px;
        height: 6 * 2px;
      }
      &-text {
        color: #5b6272;
        font-size: 11 * 2px;
      }
      &-num {
        color: #fd7900;
        font-size: 11 * 2px;
        font-weight: 700;
      }
    }
  }
}
.animation-will {
  will-change: transform;
  // will-change: scroll-position;
}

.cubic-bezier-ball {
  position: absolute;
  opacity: 0;
  top: 0;
  visibility: hidden;
}
</style>
